<html>

<head>
  <title>Web3modal example written in vanilla JavaScript and HTML</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Get some bootstrap default styles -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <!-- Construct a Bootstrap layout -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Web3modal example for vanille JavaScript and HTML</h1>

        <p>No wallet connected. Connect wallet to show accounts and their ETH balances.</p>

        <div class="alert alert-danger" id="alert-error-https" style="display: none">
          You can run this example only over HTTPS connection.
        </div>

        <div id="prepare">
          <button class="btn btn-primary" id="btn-connect">
            Connect wallet
          </button>
        </div>

        <div id="connected" style="display: none">
          <button class="btn btn-primary" id="btn-disconnect">
            Disconnect wallet
          </button>

          <div>
            <form class="form-horizontal">
              <div class="panel panel-default">
                <div class="panel-heading">
                  Mint
                  SagittariusBoy (SGRB)
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Count:</label>
                    <div class="col-sm-3">
                      <input id="mintCount" type="number" step="1" max="8" class="form-control" value="1" />
                      <div id="canMintCount1"></div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Recommender:</label>
                    <div class="col-sm-3">
                      <input type="text" id="recommenderAddress" class="form-control"
                        value="0xe0753377ED07227C648dd73C11c3497437367ED6" />
                    </div>
                  </div>
                  <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-4">
                      <button class="btn btn-primary" id="btn-mint" type="button" disabled>
                        Mint
                      </button>
                      <div id="mintResult"></div>
                    </div>
                  </div>
                </div>
              </div>
            </form>

            <form class="form-horizontal">
              <div class="panel panel-default">
                <div class="panel-heading">
                  Mint
                  Horse and Arms
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Count:</label>
                    <div class="col-sm-3">
                      <input id="mintCount2" type="number" step="1" max="8" class="form-control" value="1" />
                      <div id="canMintCount2"></div>

                    </div>
                  </div>
                  <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-4">
                      <button class="btn btn-primary" id="btn-mint2" type="button" disabled>
                        Mint
                      </button>
                      <div id="mintResult2"></div>
                    </div>
                  </div>
                </div>
              </div>
            </form>

            <hr>

            <form class="form-horizontal">
              <div class="panel panel-default">
                <div class="panel-heading">
                  Set Free Mint Date
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Free Mint Date(<a href="https://www.unixtimestamp.com/">unix
                        timestamp</a>):</label>
                    <div class="col-sm-3">
                      <input id="freeMintDate" type="text" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-4">
                      <button class="btn btn-primary" id="btn-setFreeMintDate" type="button">
                        Submit(Only Owner)
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>

            <form class="form-horizontal">
              <div class="panel panel-default">
                <div class="panel-heading">
                  Add Free Mint Address
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Allow free mint count:</label>
                    <div class="col-sm-3">
                      <input id="allowFreeMintCount" type="number" value="1" step="1" class="form-control" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label">Allow Free mint Address:</label>
                    <div class="col-sm-3">
                      <textarea id="freeMintAddress" class="form-control" rows="10"></textarea>
                      <div>Split as ,</div>
                    </div>
                    <div class="col-sm-3" id="splitFreeMintAddress">
                    </div>
                  </div>
                  <div class="form-group"><label class="col-sm-2 control-label"></label>
                    <div class="col-sm-4">
                      <button class="btn btn-primary" id="btn-setFreeMintAddress" type="button">
                        Submit(Only Owner)
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>

          </div>

          <hr>

          <div id="network">
            <p>
              <strong>Connected blockchain:</strong> <span id="network-name"></span>
            </p>

            <p>
              <strong>Selected account:</strong> <span id="selected-account"></span>
            </p>

          </div>

          <hr>

          <h3>All account balances</h3>

          <table class="table table-listing">
            <thead>
              <th>Address</th>
              <th>ETH balance</th>
            </thead>

            <tbody id="accounts">
            </tbody>
          </table>

          <p>Please try to switch between different accounts in your wallet if your wallet supports this functonality.
          </p>

        </div>

        <br>

        <div class="well">
          <p class="text-muted">See also the <a href="https://web3modal.com/">TypeScript and React example
              application</a></p>
        </div>

      </div>
    </div>
  </div>

  <!-- We use simple <template> templating for the example -->
  <div id="templates" style="display: none">
    <template id="template-balance">
      <tr>
        <th class="address"></th>
        <td class="balance"></td>
      </tr>
    </template>
  </div>

  <!--

      Use unpkg CDN to load all NPM packages to vanilla Javascript - read more at http://unpkg.com

      On your deployment, you properly either want to use a preprocessing tool like webpack
      to include these files, or extract NPM archives and manually host the files inside.

      TODO: Pin down all versions.

    -->

  <script type="text/javascript" src="https://unpkg.com/web3@1.2.11/dist/web3.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/web3modal@1.9.0/dist/index.js"></script>
  <script type="text/javascript" src="https://unpkg.com/evm-chains@0.2.0/dist/umd/index.min.js"></script>
  <script type="text/javascript"
    src="https://unpkg.com/@walletconnect/web3-provider@1.2.1/dist/umd/index.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/fortmatic@2.0.6/dist/fortmatic.js"></script>
  <script type="text/javascript" src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>

  <!-- This is our example code -->
  <script type="text/javascript" src="./example.js?v=20"></script>
</body>

</html>